<template>
    <div class="singerList">
        <div class="top-banner">
            <div class="top-title"></div>
        </div>
        <main>
            <div class="singerList-box w">
                <div class="changSingerType">
                    <div class="singerType">
                        <ul>
                            <li
                                :class="
                                    currentType.type == '-1'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentType('-1')"
                            >
                                全部
                            </li>
                            <li
                                :class="
                                    currentType.type == '1'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentType('1')"
                            >
                                男歌手
                            </li>
                            <li
                                :class="
                                    currentType.type == '2'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentType('2')"
                            >
                                女歌手
                            </li>
                            <li
                                :class="
                                    currentType.type == '3'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentType('3')"
                            >
                                乐队
                            </li>
                        </ul>
                    </div>
                    <div class="areaType">
                        <ul>
                            <li
                                :class="
                                    currentType.area == '-1'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentArea('-1')"
                            >
                                全部
                            </li>
                            <li
                                :class="
                                    currentType.area == '7'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentArea('7')"
                            >
                                华语
                            </li>
                            <li
                                :class="
                                    currentType.area == '96'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentArea('96')"
                            >
                                欧美
                            </li>
                            <li
                                :class="
                                    currentType.area == '8'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentArea('8')"
                            >
                                日本
                            </li>
                            <li
                                :class="
                                    currentType.area == '16'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentArea('16')"
                            >
                                韩国
                            </li>
                            <li
                                :class="
                                    currentType.area == '0'
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeCurrentArea('0')"
                            >
                                其他
                            </li>
                        </ul>
                    </div>
                    <div class="letterType">
                        <ul>
                            <li
                                v-for="item in letterList"
                                :class="
                                    currentType.initial == item
                                        ? 'selectedType'
                                        : ''
                                "
                                @click="myChangeInitial(item)"
                            >
                                {{ item }}
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="singerBox" v-loading="loading">
                    <div
                        class="singerItem"
                        v-for="item in singerList"
                        @click="singerListJumpDetails(item.id)"
                    >
                        <div class="img-box">
                            <img
                                src="../../assets/images/lazyLoaing2.gif"
                                :data-img="item.img1v1Url"
                                alt=""
                                ref="singerImg"
                            />
                        </div>
                        <div class="content-box">
                            <p>{{ item.name }}</p>
                            <span>单曲数{{ item.musicSize }}</span>
                        </div>
                    </div>
                </div>
                <div class="poll" ref="pollSingerlist">
                    <img src="../../assets/images/loading2.gif" alt="" />
                </div>
            </div>
        </main>
    </div>
</template>

<script>
import { lazyload, debounce } from "../../utils/common";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "singerlist"
);
export default {
    data() {
        return {
            debounce,
        };
    },
    computed: {
        ...mapState(["letterList", "currentType", "singerList", "loading"]),
    },
    created() {
        this.getSingerList();
        this.asciiCode();
    
        //用于记录用户的滚动方向，用户一滚动，就把滚动后得到的值赋给这个值
        //等于是一个单向锁，防止用户向上滚动的时候也会触发事件
        this.prevY = 0;
        //给window绑定滚轮事件,并绑定防抖函数，防止多次发送ajax请求。
    },
    updated() {
         this.foo=this.debounce(this.sendAjax, 1000);
         console.log('返回的函数',this.foo);
        window.addEventListener(
            "scroll",
           this.foo,
            false
        );
        setTimeout(() => {
            lazyload(this.$refs.singerImg);
        }, 500);
    },
    beforeDestroy() {
        console.log("销毁执行");
        window.removeEventListener("scroll", this.foo);
        console.log("销毁是否完成");
    },
    methods: {
        ...mapActions(["getSingerList"]),
        ...mapMutations([
            "asciiCode",
            "changeCurrentType",
            "changeCurrentArea",
            "changeInitial",
            "changeCurrentPage",
        ]),
        singerListJumpDetails(val) {
            this.$router.push("/home/singerDetails/art-musicList/" + val);
        },
        myChangeCurrentType(val) {
            //每次切换，都需要把prevY重置为0，否则prevY是有值的，就不会触发滚动事件
            this.prevY = 0;
            console.log(val);
            this.changeCurrentType(val);
            this.getSingerList();
        },
        myChangeCurrentArea(val) {
            this.prevY = 0;
            this.changeCurrentArea(val);
            this.getSingerList();
        },
        myChangeInitial(val) {
            this.prevY = 0;
            this.changeInitial(val);
            this.getSingerList();
        },
        //给窗口绑定事件
        sendAjax() {
            console.log("我是歌手列表的事件~~~,我还在~~~");
            if (window.scrollY > this.prevY) {
                lazyload(this.$refs.singerImg);
                //记录单向锁，防止向上滚动也触发事件
                this.prevY = window.scrollY;
                console.log("window", window.scrollY);
                console.log(this.$refs.pollSingerlist.getBoundingClientRect().top);
                if (
                    //如果占位符距离顶部的距离小于窗口，就证明这个占位符出现在了用户视野里
                    //就可以发送ajax了
                    this.$refs.pollSingerlist.getBoundingClientRect().top <
                    window.innerHeight
                ) {
                    //请求下一页数据
                    this.changeCurrentPage();
                    this.getSingerList();
                    this.qq();
                }
            }
            // this.refs.poll.getBoundingClientRect().top;
        },
        qq() {
            console.log("我请求下一页拉~~~");
        },
    },
};
</script>

<style lang='scss' scoped>
@import "../../assets/sass/singerList.scss";
</style>
